<!-- pages/index/index.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<custom-navbar :title="type == 2 ? '折扣专区' : type == 4 ? '生活分类' : '热门商品'" :showBack="true">

		</custom-navbar>
		<!-- 搜索 -->
		<search-box @search="onSearch">
			<slot name="icon">
				<u-icon></u-icon>
				<u-icon v-if="modelValue" name="close-circle" @click="clearInput"></u-icon>
			</slot>
		</search-box>
		<!-- 导航 -->
		<up-tabs :list="navList" lineWidth="0" lineColor="#f56c6c" fontSize="30rpx" :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
           
        }" :inactiveStyle="{
            color: 'rgba(255,255,255,0.6)',
			fontWeight: 'bold',
           
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="currentTab"
			 @change="handleTabChange">
		</up-tabs>
		<!-- 订单专区 -->
		<view class="section-wrapper">
			<up-waterfall v-model="orderList" :col="2">
				<template v-slot:left="{ leftList }">
					<goods-card v-for="(item, index) in leftList" :key="item.id" :data="item" :is-special="index < 2" @click="toDetails(item.id)"/>
				</template>
				<template v-slot:right="{ rightList }">
					<goods-card v-for="(item, index) in rightList" :key="item.id" :data="item"
						:is-special="index < 2" @click="toDetails(item.id)"/>
				</template>
			</up-waterfall>
			<!-- 加载状态提示 -->
			<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" marginTop="72rpx" color="#999" lineColor="#D9DCE2" line lineWidth="99rpx" />
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import GoodsCard from '@/components/GoodsCard.vue'
	import SearchBox from '../../components/SearchBox.vue'
	const type = ref(0)
	const modelValue = ref('')
	const currentTab = ref(0); // 当前选中标签索引
	// 切换选项卡
const handleTabChange = (e) => {
	
  currentTab.value = e.index;
  console.log(e)
  if(e.index != 0){
	  
	  modelValue.value = e.name
  }else{
	  modelValue.value = ''  }
		getListData(1)
  // 这里可以添加加载对应标签数据的逻辑
  // orderList.value = [...orderList.value.filter(item=>{item.status===currentTab.value})]
};
	// 输入框获取焦点跳转搜索界面
	const onSearch = (e) => {
		console.log(e)
		modelValue.value = e
		getListData(1)
		// uni.navigateTo({
		// 	url: '/goodsPages/pages/goods/search'
		// })
	}
	const clearInput = (e)=>{
		console.log('e',e)
		modelValue.value = e
		getListData(1)
	}
	// 列表数据
	const orderList = ref([])
	// 当前页码
	const currentPage = ref(1)
	// 是否正在加载
	const loading = ref(false)
	// 加载状态提示
	const loadingText = ref('努力加载中');
	const loadmoreText = ref('滑动加载更多');
	const nomoreText = ref('实在没有了');
	// 是否还有更多数据
	const hasMore = ref(true)
	// 滚动区域高度
	const scrollHeight = ref(0)
	// 加载状态
	const loadStatus = ref('loadmore')


	// 获取列表数据
	const getListData = async (page = 1) => {
		try {
			loading.value = true
			loadStatus.value = 'loading'
			orderList.value = []
			const postData = {
				page,
				goods_type: type.value,
				keywords: modelValue.value
				
			}
			// 接口请求
			await uni.$api.common.getGoodList(postData).then(res => {
				if (page === 1) orderList.value = []
				const data = ref(res.data.data.map((item, i) => ({
					id: item.id,
					title: item.goods_name,
					price: `￥${item.goods_price.toFixed(1)}`,
					oldPrice: `￥${item.market_price.toFixed(1)}`,
					count: `已售${item.sales.toFixed(0)}`,
					image: item.goods_image
				})));
				orderList.value = [...orderList.value, ...data.value];
				hasMore.value = page < res.last_page;
				loadStatus.value = hasMore.value ? 'loadmore' : 'nomore'
			})

			
		} finally {
			loading.value = false
		}
	}

	// 加载更多
	const loadMore = () => {
		if (!loading.value && hasMore.value) {
			currentPage.value++
			getListData(currentPage.value)
		}
	}
	const toDetails = (id)=>{
		uni.navigateTo({
			url:`/goodsPages/pages/goods/goods?id=${id}`
		})
	}
	// 初始化加载
	onMounted(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		type.value = options.type
		// 计算滚动高度（根据你的页面布局调整）
		scrollHeight.value = uni.getSystemInfoSync().windowHeight - 50
		getListData(1)
	})

	// 导航菜单
	const navList = ref([{
			name: '首页',
		},
		{
			name: '厨房用品',
		},
		{
			name: '刀叉',
		},
		{
			name: '纸杯',
		},
		{
			name: '生鲜果盒',
		},
		{
			name: '生鲜',
		}
	])
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		padding-bottom: 120rpx;
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		// padding-top: 44px; /* 导航栏高度 */

	}
</style>